<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>

<body>
    <div id="app" style="border: 1px solid red; padding: 10px;">
        <h1>新闻列表</h1>
        <news-item></news-item>
        <news-list></news-list>
    </div>
    </div>
    <!-- 父组件模板 -->
    <template id="news-list-template">
        <ul style="border: 1px solid blue; padding: 10px;">

            <news-item></news-item>
            <news-item></news-item>
        </ul>
    </template>
    <!-- 子组件模板 -->
    <template id="news-item-template">
        <li style="border: 1px solid green; padding: 10px;">
            新闻标题
        </li>
    </template>


    <script src="js/vue.js"></script>

    <script>
        // 创建子组件
        const newsItem = {
            // 引用子组件模板
            template: '#news-item-template'
        }
        // 创建父组件
        const newsList = {
            // 引用父组件模板
            template: '#news-list-template',
            components: {
                // 注册子组件
                'news-item': newsItem
            }
        };
        // 创建 Vue 实例，并将父组件注册到 Vue 实例中
        const app = new Vue({
            el: '#app',
            components: {
                // 注册父组件
                'news-list': newsList,
            }
        })
    </script>
</body>

</html>